<!DOCTYPE html>
<html>
<head>
    <title>详情展示</title>
    {% include 'admin/common/header.html' %}
    <link rel="stylesheet" href="{{ url_for('static', filename='/admin/admin/css/other/console1.css') }}"/>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space12">
    <div class="layui-col-md12">
        {# 个人信息卡片 #}
        <div class="layui-card">
            <div class="layui-card-header">
                个人信息
            </div>
            <div class="layui-card-body" style="padding: 25px;">
                <div class="layui-form " action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">警员编号</label>
                        <label>
                            {{ police.code }}
                        </label>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">警员名称</label>
                        <label>
                            {{ police.name }}
                        </label>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">警员职位</label>
                        <label>
                            {{ police.post }}
                        </label>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">警员警衔</label>
                        <label>
                            {{ police.title }}
                        </label>
                    </div>
                </div>

            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">
                训练纪录
            </div>
            <div class="layui-card-body">
                <table id="user-table" lay-filter="user-table"></table>
            </div>
        </div>
    </div>
</div>
{# 用户修改操作 #}
<script type="text/html" id="user-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="pear-icon pear-icon-file"></i>
    </button>
</script>

{% include 'admin/common/footer.html' %}


<script type="text/html" id="police-startTime">
    {{ '  {{layui.util.toDateString(d.starttime,  "yyyy-MM-dd HH:mm:ss")}' |safe }}}
</script>
<script type="text/html" id="police-endTime">
    {{ '  {{layui.util.toDateString(d.endtime,  "yyyy-MM-dd HH:mm:ss")}' |safe }}}
</script>
<script>
    layui.use(['layer', 'echarts', 'element', 'count'], function () {
        let table = layui.table
        let form = layui.form
        let $ = layui.jquery
        let dtree = layui.dtree
        let popup = layui.popup
        let common = layui.common
        let MODULE_PATH = '/scene/'
        let data = []
        // 表格数据
        let cols = [
            [
                {title: '训练编号', field: 'id', align: 'center'},
                {title: '训练开始时间', field: 'starttime', templet: '#police-startTime', align: 'center'},
                {title: '训练结束时间', field: 'endtime', templet: '#police-endTime', align: 'center'},
                {title: '详情', toolbar: '#user-bar', align: 'center', width: 130}
            ]
        ]
        $.ajax({
            method: 'GET',
            url: '/scene/user/data/{{ police.code }}/{{ police.name }}',
            success: function (result) {
                if (result.count > 0) {
                    data = result.data;
                }
                // 渲染表格数据
                table.render({
                    elem: '#user-table',
                    cols: cols,
                    skin: 'line',
                    height: 'full-148',
                    page: true,
                    limit: 10,
                    toolbar: '#user-toolbar', /*工具栏*/
                    text: {none: '暂无训练信息'},
                    data: data,
                    defaultToolbar: [{
                        layEvent: 'refresh',
                        icon: 'layui-icon-refresh'
                    }, 'filter', 'print', 'exports'] /*默认工具栏*/
                })
            }
        })


        $('.user-group').click(function () {
            let group = $(this).attr('user-group')
            let field = form.val('user-query-form')
            if (group === '-1') {
                field.deptId = group
                $(this).removeClass('button-default')
                $(this).prev().removeClass('button-primary')
                $(this).prev().addClass('button-default')
                $(this).addClass('button-primary')
            } else {
                field.deptId = group
                $(this).removeClass('button-default')
                $(this).next().removeClass('button-primary')
                $(this).next().addClass('button-default')
                $(this).addClass('button-primary')
            }
            window.refresh(field)
        })

        table.on('tool(user-table)', function (obj) {
            if (obj.event === 'remove') {
                window.remove(obj)
            } else if (obj.event === 'edit') {
                window.edit(obj)
            }
        })

        table.on('toolbar(user-table)', function (obj) {
            if (obj.event === 'refresh') {
                window.refresh()
            } else if (obj.event === 'batchRemove') {
                window.batchRemove(obj)
            } else if (obj.event === 'collasped') {
                $('.user-left').toggleClass('user-collasped')
                $('.user-main').toggleClass('user-collasped')
                table.resize()
            }
        })

        form.on('submit(user-query)', function (data) {
            window.refresh(data.field)
            return false
        })


        window.edit = function (obj) {
            layer.open({
                type: 2,
                title: '训练详细信息',
                shade: 0.1,
                area: ['100%', '100%'],
                content: MODULE_PATH
                    + 'detail/{{ police.code }}/{{ police.name }}/'
                    + obj.data['starttime'] + '/'
                    + obj.data['endtime']
            })
        }

        window.remove = function (obj) {
            layer.confirm('确定要删除该成绩', {icon: 3, title: '提示'}, function (index) {
                layer.close(index)
                let loading = layer.load()
                $.ajax({
                    url: MODULE_PATH + 'remove/' + obj.data['course_id'],
                    dataType: 'json',
                    type: 'delete',
                    success: function (result) {
                        layer.close(loading)
                        if (result.success) {
                            popup.success(result.msg, function () {
                                obj.del()
                            })
                        } else {
                            popup.failure(result.msg)
                        }
                    }
                })
            })
        }

        window.batchRemove = function (obj) {
            let data = table.checkStatus(obj.config.id).data
            if (data.length === 0) {
                layer.msg('未选中数据', {
                    icon: 3,
                    time: 1000
                })
                return false
            }
            var ids = []
            var hasCheck = table.checkStatus('user-table')
            var hasCheckData = hasCheck.data
            if (hasCheckData.length > 0) {
                $.each(hasCheckData, function (index, element) {
                    ids.push(element.course_id)
                })
            }
            {#console.log(ids);#}
            layer.confirm('确定要删除选中成绩', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index)
                let loading = layer.load()
                $.ajax({
                    url: MODULE_PATH + 'batchRemove',
                    data: {ids: ids},
                    dataType: 'json',
                    type: 'delete',
                    success: function (result) {
                        layer.close(loading)
                        if (result.success) {
                            popup.success(result.msg, function () {
                                table.reload('user-table')
                            })
                        } else {
                            popup.failure(result.msg)
                        }
                    }
                })
            })
        }

        window.refresh = function (param) {
            table.reload('user-table', {where: param})
        }
    })
</script>
</body>
</html>